<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/ctx.js"></script>
</head>
<style>
    #toolbar {
        background: rgba(42, 42, 42, 0.8);
        padding: 4px;
        border-radius: 4px;
    }
    #toolbar input {
        vertical-align: middle;
        padding-top: 2px;
        padding-bottom: 2px;
    }
    #toolbar .header {
        font-weight: bold;
    }
</style>
<body>
<div id="cesiumContainer">
</div>
<div id="toolbar">
    <select data-bind="options: exampleTypes, value: currentExampleType"></select>
    <table><tbody>
    <tr>
        <td>Maximum Screen Space Error</td>
        <td>
            <input type="range" min="0.0" max="64.0" step="0.1" data-bind="value: maximumScreenSpaceError, valueUpdate: 'input'">
            <input type="text" size="5" data-bind="value: maximumScreenSpaceError">
        </td>
    </tr>
    <tr><td class="header">Attenuation</td></tr>
    <tr>
        <td>Geometric Error Scale</td>
        <td>
            <input type="range" min="0.0" max="2.0" step="0.1" data-bind="value: geometricErrorScale, valueUpdate: 'input'">
            <input type="text" size="5" data-bind="value: geometricErrorScale">
        </td>
    </tr>
    <tr>
        <td>Maximum Attenuation</td>
        <td>
            <input type="range" min="0.0" max="32.0" step="1.0" data-bind="value: maximumAttenuation, valueUpdate: 'input'">
            <input type="text" size="5" data-bind="value: maximumAttenuation">
        </td>
    </tr>
    <tr>
        <td>Base Resolution</td>
        <td>
            <input type="range" min="0.0" max="10.0" step="0.01" data-bind="value: baseResolution, valueUpdate: 'input'">
            <input type="text" size="5" data-bind="value: baseResolution">
        </td>
    </tr>
    <tr><td class="header">Eye Dome Lighting</td></tr>
    <tr>
        <td>Eye Dome Lighting Strength</td>
        <td>
            <input type="range" min="0.0" max="10.0" step="0.1" data-bind="value: eyeDomeLightingStrength, valueUpdate: 'input'">
            <input type="text" size="5" data-bind="value: eyeDomeLightingStrength">
        </td>
    </tr>
    <tr>
        <td>Eye Dome Lighting Radius</td>
        <td>
            <input type="range" min="0.0" max="10.0" step="0.1" data-bind="value: eyeDomeLightingRadius, valueUpdate: 'input'">
            <input type="text" size="5" data-bind="value: eyeDomeLightingRadius">
        </td>
    </tr>
    </tbody></table>
</div>
<script>
    var initCesium = new InitCesium();
    var viewer = initCesium.initViewer('cesiumContainer');

    var scene = viewer.scene;
    var viewModelTileset;

    if (!Cesium.PointCloudShading.isSupported(scene)) {
        console.log('This browser does not support point cloud shading');
    }

    function reset() {
        viewer.scene.primitives.remove(viewModelTileset);
        viewModelTileset = undefined;
    }

    // The viewModel tracks the state of our mini application.
    var pointClouds = ['St. Helens', 'Church'];
    var viewModel = {
        exampleTypes : pointClouds,
        currentExampleType : pointClouds[0],
        maximumScreenSpaceError : 16.0,
        geometricErrorScale : 1.0,
        maximumAttenuation : 0, // Equivalent to undefined
        baseResolution : 0, // Equivalent to undefined
        eyeDomeLightingStrength : 1.0,
        eyeDomeLightingRadius : 1.0
    };

    function tilesetToViewModel(tileset) {
        viewModelTileset = tileset;

        var pointCloudShading = tileset.pointCloudShading;
        viewModel.maximumScreenSpaceError = tileset.maximumScreenSpaceError;
        viewModel.geometricErrorScale = pointCloudShading.geometricErrorScale;
        viewModel.maximumAttenuation = pointCloudShading.maximumAttenuation ? pointCloudShading.maximumAttenuation : 0;
        viewModel.baseResolution = pointCloudShading.baseResolution ? pointCloudShading.baseResolution : 0;
        viewModel.eyeDomeLightingStrength = pointCloudShading.eyeDomeLightingStrength;
        viewModel.eyeDomeLightingRadius = pointCloudShading.eyeDomeLightingRadius;
    }

    function loadStHelens() {
        // Set the initial camera view to look at Mt. St. Helens
        var initialPosition = Cesium.Cartesian3.fromRadians(-2.1344873183780484, 0.8071380277370774, 5743.394497982162);
        var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(112.99596671210358, -21.34390550872461, 0.0716951918898415);
        viewer.scene.camera.setView({
            destination: initialPosition,
            orientation: initialOrientation,
            endTransform: Cesium.Matrix4.IDENTITY
        });

        // Mt. St. Helens 3D Tileset generated from LAS provided by https://www.liblas.org/samples/
        // This tileset uses replacement refinement and has geometric error approximately equal to
        // the average interpoint distance in each tile.
        var tileset = new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(5713) });
        viewer.scene.primitives.add(tileset);

        tileset.maximumScreenSpaceError = 16.0;
        tileset.pointCloudShading.maximumAttenuation = undefined; // Will be based on maximumScreenSpaceError instead
        tileset.pointCloudShading.baseResolution = undefined;
        tileset.pointCloudShading.geometricErrorScale = 1.0;
        tileset.pointCloudShading.attenuation = true;
        tileset.pointCloudShading.eyeDomeLighting = true;

        tilesetToViewModel(tileset);
    }

    function loadChurch() {
        // Point Cloud by Prof. Peter Allen, Columbia University Robotics Lab. Scanning by Alejandro Troccoli and Matei Ciocarlie.
        // This tileset uses additive refinement and has geometric error based on the bounding box size for each tile.
        var tileset = new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(5714) });
        viewer.scene.primitives.add(tileset);

        tileset.maximumScreenSpaceError = 1024.0; // For better performance, due to how this tileset treats geometric error.
        tileset.pointCloudShading.maximumAttenuation = 8.0; // Don't allow points larger than 8 pixels.
        tileset.pointCloudShading.baseResolution = 0.05; // Assume an original capture resolution of 5 centimeters between neighboring points.
        tileset.pointCloudShading.geometricErrorScale = 1.0; // Applies to both geometric error and the base resolution.
        tileset.pointCloudShading.attenuation = true;
        tileset.pointCloudShading.eyeDomeLighting = true;

        tilesetToViewModel(tileset);
        viewer.zoomTo(tileset);
    }

    function checkZero(newValue) {
        var newValueFloat = parseFloat(newValue);
        return (newValueFloat === 0.0) ? undefined : newValueFloat;
    }

    loadStHelens();

    // Convert the viewModel members into knockout observables.
    Cesium.knockout.track(viewModel);

    // Bind the viewModel to the DOM elements of the UI that call for it.
    var toolbar = document.getElementById('toolbar');
    Cesium.knockout.applyBindings(viewModel, toolbar);

    Cesium.knockout.getObservable(viewModel, 'currentExampleType').subscribe(function(newValue) {
        reset();
        if (newValue === pointClouds[0]) {
            loadStHelens();
        } else if (newValue === pointClouds[1]) {
            loadChurch();
        }
    });

    Cesium.knockout.getObservable(viewModel, 'maximumScreenSpaceError').subscribe(
            function(newValue) {
                if (Cesium.defined(viewModelTileset)) {
                    viewModelTileset.maximumScreenSpaceError = parseFloat(newValue);
                }
            }
    );

    Cesium.knockout.getObservable(viewModel, 'geometricErrorScale').subscribe(
            function(newValue) {
                if (Cesium.defined(viewModelTileset)) {
                    viewModelTileset.pointCloudShading.geometricErrorScale = parseFloat(newValue);
                }
            }
    );

    Cesium.knockout.getObservable(viewModel, 'maximumAttenuation').subscribe(
            function(newValue) {
                if (Cesium.defined(viewModelTileset)) {
                    viewModelTileset.pointCloudShading.maximumAttenuation = checkZero(newValue);
                }
            }
    );

    Cesium.knockout.getObservable(viewModel, 'baseResolution').subscribe(
            function(newValue) {
                if (Cesium.defined(viewModelTileset)) {
                    viewModelTileset.pointCloudShading.baseResolution = checkZero(newValue);
                }
            }
    );

    Cesium.knockout.getObservable(viewModel, 'eyeDomeLightingStrength').subscribe(
            function(newValue) {
                if (Cesium.defined(viewModelTileset)) {
                    viewModelTileset.pointCloudShading.eyeDomeLightingStrength = parseFloat(newValue);
                }
            }
    );

    Cesium.knockout.getObservable(viewModel, 'eyeDomeLightingRadius').subscribe(
            function(newValue) {
                if (Cesium.defined(viewModelTileset)) {
                    viewModelTileset.pointCloudShading.eyeDomeLightingRadius = parseFloat(newValue);
                }
            }
    );

    Sandcastle.addToggleButton('Enable Attenuation', true, function(checked) {
        if (Cesium.defined(viewModelTileset)) {
            viewModelTileset.pointCloudShading.attenuation = checked;
        }
    });

    Sandcastle.addToggleButton('Enable Eye Dome Lighting', true, function(checked) {
        if (Cesium.defined(viewModelTileset)) {
            viewModelTileset.pointCloudShading.eyeDomeLighting = checked;
        }
    });



</script>
</body>

</html>